<template>
	<el-dialog
		title="Setting"
		:visible.sync="dialogVisible"
		width="80%"
		top="80px"
		@open="dialogOpen"
	>
		<el-form ref="form" :model="form" label-width="120px" inline>
			<el-form-item label="name">
				<el-input v-model="form.name" style="width: 220px"></el-input>
			</el-form-item>
			<el-form-item label="graph type">
				<el-select v-model="form.graphtype">
					<el-option label="line" value="1"></el-option>
					<el-option label="histogram" value="2"></el-option>
					<el-option label="scattergram" value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="graphx">
				<el-input v-model="form.graphx" style="width: 220px"></el-input>
			</el-form-item>
			<el-form-item label="graphy">
				<el-input v-model="form.graphy" style="width: 220px"></el-input>
			</el-form-item>
			<el-form-item label="xaxis tick" @change="onPlotSamplingChange">
				<el-radio-group v-model="form.xAxisTick">
					<el-radio :label="1">absolute</el-radio>
					<el-radio :label="5">relative</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="plotsampling">
				<el-radio-group v-model="form.plotsampling" @change="onPlotSamplingChange">
					<el-radio :label="3">3sec</el-radio>
					<el-radio :label="6">6sec</el-radio>
					<el-radio :label="60">1min</el-radio>
					<el-radio :label="3600">1hour</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="line width">
				<el-input-number v-model="form.width" :min="1" :max="10" />
			</el-form-item>
			<el-form-item label="signal">
				<el-button type="primary" @click="signalVisible = true">choose signal</el-button>
			</el-form-item>
			<el-form-item label="config">
				<el-upload
					:file-list="[]"
					:limit="1"
					:action="''"
					accept=".json"
					:http-request="httpRequest"
				>
					<el-button type="primary">Import</el-button>
				</el-upload>
			</el-form-item>
		</el-form>
		<el-table :data="form.datecolmn" border height="400px">
			<el-table-column label="signal name" prop="keyname" min-width="120" />
			<el-table-column label="visible" prop="visible">
				<template v-slot="scope">
					<el-switch
						v-model="scope.row.visible"
						:active-value="true"
						:inactive-value="false"
					/>
				</template>
			</el-table-column>
			<el-table-column label="color" prop="colorType">
				<template v-slot="scope">
					<el-color-picker
						v-model="scope.row.color"
						:predefine="predefineColors"
					></el-color-picker>
				</template>
			</el-table-column>
			<el-table-column label="min" prop="minvalue">
				<template v-slot="scope">
					<el-input v-model="scope.row.minvalue" />
				</template>
			</el-table-column>
			<el-table-column label="max" prop="maxvalue">
				<template v-slot="scope">
					<el-input v-model="scope.row.maxvalue" />
				</template>
			</el-table-column>
			<el-table-column label="trigger" prop="triggervalue">
				<template v-slot="scope">
					<el-input v-model="scope.row.triggervalue" />
				</template>
			</el-table-column>
			<el-table-column label="trigger color" prop="triggerColor">
				<template v-slot="scope">
					<el-color-picker
						v-model="scope.row.triggerColor"
						:predefine="triggerColor"
					></el-color-picker>
				</template>
			</el-table-column>
		</el-table>
		<span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">Cancel</el-button>
		    <el-button :loading="loading" type="primary" @click="onSettingSave">Save</el-button>
			<el-button type="primary" @click="download">Export</el-button>
		  </span>
		<signal-dialog
			:visible.sync="signalVisible"
			:checked="form.datecolmn.map(v => v.key)"
			@save="onSignalSave"
		></signal-dialog>
	</el-dialog>
</template>

<script>
import SignalDialog from '@/components/SignalDialog'
import { predefineColors, triggerColor } from '@/components/constant'
import { blobDownLoad } from '@/utils'
import _ from "lodash"

export default {
	name: 'SettingDialog',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		setting: {
			type: Object,
			default: () => ({
				name: "",
				graphtype: "line",
				graphx: null,
				graphy: null,
				plotsampling: null,
				datecolmn: []
			})
		}
	},
	components: {
		SignalDialog
	},
	data() {
		return {
			form: {
				name: "",
				graphtype: "line",
				graphx: null,
				graphy: null,
				plotsampling: null,
				datecolmn: [],
				xAxisTick: 1,
				width: 2
			},
			signalVisible: false,
			predefineColors,
			triggerColor,
			updateSignal: false,
			loading: false
		}
	},
	computed: {
		dialogVisible: {
			get() {
				return this.visible;
			},
			set(val) {
				val === false && this.resetData();
				this.$emit("update:visible", val);
			}
		},
		signals() {
			return this.$store.state.signals
		}
	},
	methods: {
		resetData() {},
		dialogOpen() {
			const { datecolmn, graphtype, graphx, graphy, name, plotsampling, width, xAxisTick } = this.setting
			this.form = {
				graphtype,
				graphx,
				graphy,
				name,
				plotsampling,
				width,
				xAxisTick,
				datecolmn: datecolmn.map(v => ({
					...v,
					visible: v.visible === undefined ? true : v.visible
				}))
			}
		},
		onPlotSamplingChange() {
			this.updateSignal = true
		},
		async onSettingSave() {
			this.loading = true
			this.$emit('save', { data: this.form, updateSignal: this.updateSignal })
			// this.loading = false
			this.updateSignal = false
			this.dialogVisible = false
		},
		onSignalSave(data) {
			const arr = []
			data.forEach(v => {
				const signal = this.form.datecolmn.find(item => item.key === v)
				if (signal) {
					arr.push(signal)
				} else {
					arr.push({
						key: v,
						keyname: this.signals.filter(k => k.column === v)[0].name,
						color: predefineColors[arr.length],
						maxvalue: null,
						minvalue: null,
						triggervalue: null,
						triggerColor: "#c12e34",
						visible: true
					})
				}
			})
			this.form.datecolmn = arr

			// 信号产生变化，需要重新获取数据
			this.updateSignal = true
		},
		httpRequest(http) {
			const { file } = http
			const reader = new FileReader()
			reader.readAsText(file)
			reader.onload = e => {
				if(e.target && e.target.result) {
					// todo 校验json
					const json = JSON.parse(e.target.result.toString())
					if (Object.keys(json).includes("datecolmn") && Object.keys(json).includes("name")) {
						this.form = {
							...json,
							datecolmn: json.datecolmn.filter(v => this.signals.find(k => k.column === v.key) !== undefined)
						}
						this.updateSignal = true
					} else {
						this.$message.error("invalid config json")
					}
				}
			}
		},
		download() {
			blobDownLoad(JSON.stringify(this.form),`${this.form.name || "graph_config"}.json`)
		}
	}
}
</script>

<style scoped>

</style>
